<template>
	<view class="container">
		<u--form labelPosition="left">
			<u-form-item label="转出帐户" borderBottom :labelWidth="80">
				<picker @change="outChange" :value="outIndex" :range="myAccounts" range-key="name" mode="selector">
					<view class="picker flex align-center justify-between">
						{{myAccounts[outIndex]['name']?myAccounts[outIndex]['name']: '请先添加账户'}}
						<u-icon name="arrow-right" :size="10"></u-icon>
					</view>
				</picker>
			</u-form-item>

			<u-form-item label="转入帐户" borderBottom :labelWidth="80">
				<picker @change="inChange" :value="inIndex" :range="myAccounts" range-key="name" mode="selector">
					<view class="picker flex align-center justify-between">
						{{myAccounts[inIndex]['name']?myAccounts[inIndex]['name']:'请先添加账户'}}
						<u-icon name="arrow-right" :size="10"></u-icon>
					</view>
				</picker>
			</u-form-item>

			<u-form-item label="转出金额"  :labelWidth="80">
				<u--input v-model="amount" ></u--input>
			</u-form-item>
		</u--form>



		<view class="flex flex-direction margin-top">
			<button :disabled="disabled" class="cu-btn lg bg-theme" @tap="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import accountModel from '../../models/AccountModel';
	import FundsModel from '../../models/FundsModel';
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['userInfo', 'accounts']),
			myAccounts() {
				const rows = []
				this.accounts.forEach(item => {
					if (item.user_id == this.userInfo.id) {
						rows.push(item)
					}
				})
				return rows
			},
		},
		data() {
			return {
				loadStatus: false,
				outIndex: 0,
				inIndex: 0,
				amount: '',
				disabled: false
			}

		},
		async onLoad() {
			uni.showLoading();
			this.loadStatus = true;
			uni.hideLoading();
		},
		methods: {
			outChange(e) {
				this.outIndex = e.detail.value;
			},
			inChange(e) {
				this.inIndex = e.detail.value;
			},
			submit() {
				if (this.outIndex == this.inIndex) {
					this.$base.msg('出入帐户相同');
					return false;
				}

				if (this.amount <= 0) {
					this.$base.msg('请输入金额');
					return false;
				}

				this.disabled = true;
				uni.showLoading({
					mask: true
				})

				const accounts = this.myAccounts
				FundsModel.transfer({
					amount: this.amount,
					out_account_id: accounts[this.outIndex]['id'],
					in_account_id: accounts[this.inIndex]['id'],
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.$base.msg(res.msg);
						var pages = getCurrentPages();
						var page = pages[pages.length - 2];
						page.$vm.get_account_list();
						uni.navigateBack();
					} else {
						this.disabled = false;
						this.$base.alert(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 40upx 20upx;
		
		.picker{
			height: 60rpx;
		}
		
		.cu-btn{
			width: 100%;
			color: #fff;
		}

	}
</style>